<template>
	<view class="app">
		<view><u-toast ref="uToast" /></view>
		<view class="tips">
			<view style="color: white; font-size: 32rpx;">应用内部某功能禁用管控策略设置</view>
			<view style="color: #cccccc; font-size: 25rpx;">可针对应用导航条或应用页面某功能按钮做禁用管控，如微信导航条中的“发现”做禁止点击。注意开启该功能使用，需要具备一定的代码基础知识，因此暂不对非学校及培训机构类客户开放</view>
		</view>
		
		<view  class="body">
			<view style="font-weight: bold; font-size: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx;">{{settingText}}</view>
			<view class="noData"  v-if="showNothing">
				<view>
					<u-image width="120rpx" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noData.png" mode="widthFix"></u-image>
					<view>暂无数据</view>
				</view>
			</view>
			
			<view v-for="(item, index) in appList" :key="index" >
				<view class="appInfo">
					<u-image width="150rpx" height="150rpx"  mode="widthFix" :src="item.app_img"></u-image>
					<view style="font-size: 40rpx;">{{item.app_name}}</view>
					<u-button shape="square" size="medium" :custom-style="customStyle" @click="delAppInside(item.id)">删除</u-button>
				</view>
				<view style="padding: 20rpx;">
					<view>包名:{{item.package}}</view>
					<view>更新日期:{{item.update_time}}</view>
					<u-collapse>
							<u-collapse-item title="查看已设置的限制id">
								<view v-for="id in item.content" :key="id">
									{{id}}
								</view>
							</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
		
		<view style="display: flex; justify-content: center; margin-top: 30rpx;">
			<u-button shape="square" type="primary" @click="goToUrl">添加应用ID管控</u-button>
		</view>
		
	</view>
		
</template>

<script>
import { addAppInside, delAppInside, getAppInside } from '../../../api/userHome'
	export default {
		data() {
			return {
				settingText: '当前已开启管控应用',
				src: '',
				appList: [],
				pages: 1,
				//是否无更多
				notMore: true,
				showNothing: false,
				totalPages: 0,
				pageSize: 5,
				customStyle: {
					margin: '0rpx',
					padding: '0rpx',
					width: '100rpx',
					height: '60rpx',
					
				},
			}
		},
		onLoad() {
			this.refreshListAndPage();
		},
		//页面滚动到底部事件
		onReachBottom() {
			 //获取列表
			 if (this.notMore) {
				 this.pages++
				 this.queryAppInside()
			 }
		},
		methods: {
			queryAppInside() {
				uni.showLoading({
					title: "加载中"
				});
				getAppInside({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					pageSize: this.pageSize
				}).then(res => {
					if (res.data) {
						this.appList = this.appList.concat(res.data)
						this.showNothing = false
						this.totalPages =  Math.ceil(res.total / this.pageSize)  //获取总页数
						if (this.pages >= this.totalPages) {
							this.notMore = false
						}
					}else {
						this.notMore = false
						if (this.pages == 1) {
							this.showNothing = true
						}else {
							uni.showToast({
								title: '没有更多了'
							})
						}
					}

				}).catch(err => {
					uni.hideLoading()
					this.showNothing = true
					this.appList = []
				})
				uni.hideLoading()
			},
			//刷新列表和页码
			refreshListAndPage() {
				this.appList = []
				this.pages = 1
				this.notMore = true
				this.hasData = false
				this.queryAppInside()
			},
			goToUrl() {
				uni.navigateTo({
					url: '/pages_subpackage/appControl/addAppInside/index'
				})
			},
			addAppInside() {
				addAppInside({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			delAppInside(id) {
				delAppInside({
					app_inside_id: id,
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					last_ip: uni.getStorageSync("Ip")
				}).then(res => {
					
					console.log(this.appList)
					this.appList = this.appList.filter(item => item.id !== id)
					
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			}
		}
	}
	
</script>

<style lang="scss">
	.app {
		.tips {
			    background-color: #4d94ff;
			    border-radius: 35rpx;
			    height: 180rpx;
			    padding-left: 60rpx;
			    padding-top: 13rpx;
				margin-bottom: 20rpx;
		}
		
		.body {
			background-color: #ffffff;
			border-style: solid;
			border-color: #ffffff;
			border-radius: 20rpx;
		}
		.noData {
			display: flex;
			justify-content: center;
		}
		.appInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
	}
</style>